<template>
  <div class="progressBox">
    <div class="progressLi" >
      <el-row :gutter="10">
        <el-col :span="7" >
          <div class="grid-content bg-purple">
            {{value.name}}
          </div>
          </el-col>
        <el-col :span="10">
          <div class="progressOut">
            <div class="progressInner" :style="style">
              <span v-if="showText">
                {{value.percent}}
              </span>
            </div>
            </div>
            </el-col>
        <el-col :span="7">
          <div class="grid-content bg-purple">
            {{value.value}}人
          </div>
          </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
 import { ElRow as elRow,ElCol as elCol } from 'element-plus'
 import 'element-plus/dist/index.css'
import {ref,defineProps,computed,toRefs,watch} from 'vue'
interface valueLi{
name:string,
value:string,
percent:string
}
let props =defineProps({
    value: {
      type: Object,
      default: () => {},
    },
    color:{
    type:String,
    default:""
    },
    showText:{
    type:Boolean,
    default:false
    }
})
let {color,value }=toRefs(props)
// watch(props,(val)=>{
// value.value =val.value
// })
let style =computed(()=>{

  return "width:"+parseFloat(value.value.percent)*100 +"%;"+"backGround:"+color.value
})
</script>
<style lang="scss" scoped>
.progressBox{
    width: 100%;
    height: 100%;
    padding: 10px 0;
    box-sizing: border-box;
    .progressLi{
    padding:0 20px ;
    // height: 20px;
    min-height: 20px;
    overflow: auto;
    }
}
.progressOut{
width: 100%;
background: #D7D7D7;
border-radius: 20px;
    height: 20px;
}
.progressInner{
    height: 20px;
border-radius: 20px;
color: #fff;
text-align: center;
}
</style>